<template>
  <div id="top-header">
    <div class="box-flex">
      <div class="left">
        <div>
          <router-link v-bind:to="nav[0]">数据大屏</router-link>
        </div>
        <div>
          <router-link v-bind:to="nav[1]">源头管理</router-link>
        </div>
        <div>
          <router-link v-bind:to="nav[2]">运营监测</router-link>
        </div>
        <div>
          <router-link v-bind:to="nav[3]">统计分析</router-link>
        </div>
        <div>
          <router-link v-bind:to="nav[4]">平台运维</router-link>
        </div>
      </div>
      <div class="middle">北海市货运源头企业信息采集系统</div>
      <div class="right">
        <div class="welcome">欢迎访问北海市货运源头企业信息采集系统！</div>
        <el-dropdown>
          <div class="user-info">
            <el-avatar :size="25" :src="'data:' + avatarUrl"></el-avatar>
            <div class="user-name">{{ name }}</div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="logout" @click.native="logOutBtnClick">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { logOut } from '@/service/login/login'
import localCache from '@/utils/localCache'
export default {
  name: 'TopHeader',
  props: {
    name: {
      type: String,
      default: ''
    },
    avatarUrl: {
      type: String,
      default:
        'image/png;base64,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'
    },
    nav: {
      type: Array,
      default: function () {
        return ['a', 'b', 'c', 'd', 'e']
      }
    }
  },
  methods: {
    async logOutBtnClick () {
      const { data } = await logOut()
      if (data.code === 0) {
        localCache.deleteItem('token')
        localCache.deleteItem('name')
        this.$store.commit('m_msg/WEBSOCKET_CLOSED')
        this.$router.replace('/login')
        this.$message({
          message: '退出登录成功',
          type: 'success'
        })
      }
    }
  }
}
</script>

<style lang="less">
#top-header {
  position: relative;
  width: 100%;
  color: #ffffff;

  .box-flex {
    height: 100%;
    display: flex;
    justify-content: space-between;

    .left {
      position: relative;
      display: flex;
      width: 100%;
      height: 78px;
      background-image: url('~@/assets/img/top-bg.png');
      background-size: contain;
      background-repeat: repeat-x;
      align-items: center;
      white-space: nowrap;

      div {
        font-size: 14px;
        margin: 20px;

        a {
          color: #fff;
        }
      }
    }

    .middle {
      width: 636px;
      height: 110px;
      font-size: 28px;
      text-align: center;
      line-height: 110px;
      color: #88d5ff;
      background-image: url('~@/assets/img/top-t.png');
      background-size: contain;
      background-repeat: no-repeat;
      flex-shrink: 0;
    }

    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
      width: 100%;
      height: 78px;
      background-image: url('~@/assets/img/top-bg.png');
      background-size: contain;
      background-repeat: repeat-x;

      div {
        margin: 0 20px;
      }

      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .logout {
        width:50px;
      }
    }
  }
}
</style>
